import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/pictorialBar'
import 'echarts/lib/chart/map'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/scatter'

import 'echarts/lib/component/geo'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'
import 'echarts/lib/component/visualMap'
import 'echarts/lib/component/axis';
import 'echarts/lib/component/tooltip'
import alertBg from '@/assets/x1/alertBg.png'
import { vw2px } from './index'

function completed(num){
    return num < 10 ? '0'+num : num
}
function bin2hex(s) {
  let i;
  let l;
  let o = "";
  let n;
  s += "";
  for (i = 0, l = s.length; i < l; i++) {
    n = s.charCodeAt(i).toString(16);
    o += n.length < 2 ? "0" + n : n;
  }
  return o;
}
function nowTime(){
    let week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    let date = new Date();
    let years = date.getFullYear(),
        months =date.getMonth() + 1,
        days = date.getDate(),
        weeks = date.getDay();
    let hours = date.getHours(),
        minutes = date.getMinutes();
    let _nowTime = `${years}-${completed(months)}-${completed(days)} ${completed(hours)}:${completed(minutes)} ${week[weeks]}`
    return _nowTime;
}

function getUUID() {
    let canvas = document.createElement("canvas");
    let ctx = canvas.getContext("2d");
    let txt = location.origin;
    ctx.textBaseline = "top";
    ctx.font = "14px 'Arial'";
    ctx.textBaseline = "mrleecom";
    ctx.fillStyle = "#f60";
    ctx.fillRect(125, 1, 62, 20);
    ctx.fillStyle = "#069";
    ctx.fillText(txt, 2, 15);
    ctx.fillStyle = "rgba(102, 204, 0, 0.7)";
    ctx.fillText(txt, 4, 17);
    let b64 = canvas.toDataURL().replace("data:image/png;base64,", "");
    let bin = atob(b64);
    let crc = bin2hex(bin.slice(-16, -12));
    return crc;
 }
// 主题颜色

function formatter(param, unit = '') {
    if (Object.prototype.toString.call(param) === '[object Array]' && param.length > 0) {
        const { name, value } = param[0]
        let html = '<div class="tooltip-modal">'
        html += name + '：' + value + unit
        html += '</div>'
        return html
    } else {
        return ''
    }
}

const color = ['#D0021B', '#01EEFF', '#0D89F6', '#3473B2', '#8214E3'];

// 封装柱状图样式
// type 为尖头0，圆头绿渐变1，圆头蓝渐变2，打横圆头3
function barChart(option, type, unit) {
    const xAxisData = (option.xAxisData || []).map(item => {
        return item
    });

	const seriesData = option.seriesData || [];
	const itemColorList = option.color || color;
	let typeData = {};
    // const xAxisData = xAxisData1.map(item => {
    //     return item.slice(0, 2)
    // })
	let xAxis = {
		type: 'category',
		nameTextStyle: {
			color: '#02eeff'
		},
		axisLine: {
			lineStyle: {
				color: '#02eeff'
			}
		},
        axisLabel: {
            show: true,
            textStyle: {
                color: '#02eeff',
                fontSize: vw2px(0.67),
                textAlign: 'left'
            },
            formatter: function (params) {
                let str = ''
                params.split('').forEach((item, index) => {
                    str += item
                    if ((index + 1) % 3 === 0) str += '\n'
                })
                return str
            }
        },
		splitLine :{    //网格线
			lineStyle:{
				color:"rgba(70,79,97,0.5)",
				type:'dashed'    //设置网格线类型 dotted：虚线   solid:实线
			},
			show:true //隐藏或显示
		},
		data: xAxisData
	}
	let yAxis = {
		type: 'value',
		axisLine: {
			lineStyle: {
				color: '#02eeff'
			}
		},
		splitLine: {
			show: true,
			lineStyle: {
				type:'dashed',
				color:"rgba(70,79,97,0.5)"   // 修改网格线颜色
			}
		}
	}
	//最新替换0的柱形配置
	const colorConfig= {
        type: "linear",
        x: 1,
        y: 0,
        x2: 0,
        y2: 0,
        colorStops: [
            {
                offset: 0,
                color: "#289DF5"
            },
            {
                offset: 0.5,
                color: "#0DE8FF"
            },
            {
                offset: 0.5,
                color: "#49B1FB"
            },
            {
                offset: 1,
                color: "#17E9FD"
            }
        ]
    }

    const echartColor0 = [];
    const echartColor1 = [];
    const echartColor2 = [];
	seriesData.map(e=>{
		echartColor0.push(
			{
				value: e,
				itemStyle: {
					normal: {
						color: colorConfig
					}
				}
			}
		)
		echartColor1.push(
			{
				value: 1,
				itemStyle: {
					normal: {
						color: colorConfig
					}
				}
			}
		)
		echartColor2.push(
			{
				value: e,
				itemStyle: {
					normal: {
						borderColor: colorConfig,
						borderWidth: 2,
						color: colorConfig
					}
				}
			}
		)
	})
	const barWidth = vw2px(1.3);
	//最新替换0的柱形
	const chart0 ={
		backgroundColor: 'transparent',
		tooltip: {
			trigger: "axis",
            axisPointer: {
                type: 'shadow'
            },
            formatter: function (param) {
                return formatter(param)
            }
		},
		xAxis: {
			data: xAxisData,
			axisTick: {
				show: false
			},
			axisLabel: {
				color: "#02eeff",
				fontSize: vw2px(0.9)
			},
			nameTextStyle: {
				color: '#02eeff'
			},
			axisLine: {
				lineStyle: {
					color: '#02eeff'
				}
			},
            splitLine: {    //网格线
                lineStyle: {
                    color: "rgba(70,79,97,0.5)",
                    type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
                },
                show: true //隐藏或显示
			},
		},
		yAxis: {
			show: false
		},
		grid: {
			left: '5%',
			right: '5%',
			top: '10%',
            bottom: '15%'
        },
        series: [
            {
                z: 1,
                type: "bar",
				barWidth,
				data: echartColor0,
				itemStyle: {
					normal: {
						label:{
                            show: true,
                            position: [3, -vw2px(1.1)],
                            textStyle: { //数值样式
                                color: '#78dffd',
                                fontSize: vw2px(1),
                                fontWeight: 'bold'
							}
						}
					}
				},
			},
			// {
			// 	z: 2,
			// 	name: "底部",
			// 	type: "pictorialBar",
			// 	data: echartColor1,
			// 	symbol: "diamond",
			// 	symbolOffset: [0, "10%"],
			// 	symbolSize: [barWidth, 10]
			// },
			{
				z: 3,
				name: "上部1",
				type: "pictorialBar",
				symbolPosition: "end",
				data: echartColor2,
				symbol: "diamond",
				symbolOffset: [0, "-50%"],
				symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth]
			}
		]
	}
	let label = {
		show: true,
		position: 'top',
		color: '#02eeff',
        fontSize: vw2px(1.1),
        fontWeight: 'bold'
	}
	let itemStyle = {
        normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0,244,255,1)' // 0% 处的颜色
            }, {
                offset: 1,
                color: 'rgba(0,77,167,1)' // 100% 处的颜色
            }], false),
            barBorderRadius: [30, 30, 0, 0],
            shadowColor: 'rgba(0,160,221,1)',
			shadowBlur: 4,
		}
	}

	if (xAxisData.length >= 5 && type === 1) {
		itemStyle = {
			normal: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
					offset: 0,
					color: '#00fcae'
				}, {
					offset: 1,
					color: '#006388'
				}]),
				barBorderRadius: [30, 30, 0, 0],
				shadowColor: 'rgba(0,160,221,1)',
				shadowBlur: 4,
			}
		}
	}

	if (type === 2) {
		itemStyle = {
			normal: {
				color: new echarts.graphic.LinearGradient(
					0, 0, 0, 1, [{
						offset: 0,
						color: '#00feff'
					},
					{
						offset: 0.5,
						color: '#027eff'
					},
					{
						offset: 1,
						color: '#0286ff'
					}
				]
				),
				barBorderRadius: [30, 30, 0, 0],
				shadowColor: 'rgba(0,160,221,1)',
				shadowBlur: 4,
			}
		}
	}

	// 此段代码需要重新配置
	if (xAxisData.length <= 5 && type === 3) {
		itemStyle = {
			normal: {
				color: function (params) {
					return itemColorList[params.dataIndex]
				},
				barBorderRadius: [0, 30, 30, 0],
				shadowColor: 'rgba(0,160,221,1)',
				shadowBlur: 4,
			}
		};
		xAxis = {
			position: 'top',
			type: 'value',
			boundaryGap: [0, 0.01],
			splitLine: {
				show: true,
				lineStyle: {
					color: '#555'   // 修改网格线颜色
				}
			}
		};
		yAxis = {
			type: 'category',
			data: xAxisData,
			axisLine: {
				lineStyle: {
					type:'dashed',
					color:"rgba(70,79,97,0.5)"
				}
			}
		}

	}

	if (type === 0) {
		typeData = {
			type: 'pictorialBar',
			barCategoryGap: '0%',
			symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
		}
	} else {
		typeData = {
			type: 'bar'
		}
	}

	const chart = {
		color: ['#02eeff'],
		xAxis,
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			},
            // formatter: `{b} : {c}${unit}`,
            formatter: function (param) {
                return formatter(param, unit)
            }
		},
		yAxis:{
            show: false
		},
        grid: {
            left: '1%',
            right: '1%',
            top: '15%',
            bottom: '25%'
        },
		series: [{
			data: seriesData,
			...typeData,
			itemStyle,
			showBackground: true,
			barWidth: vw2px(1),
			label,
			backgroundStyle: {
				color: 'rgba(220, 220, 220, 0)'
			}
		}]
	}

	return type == 0 ? chart0 : chart;
}

// 封装扇形图
function pieChart(option , type) {
	const seriesData = option.seriesData.filter(item => item.value > 0);
    const radius = option.radius || [28, 35];
	const types = type || 0;
	let echart1 = []
	let allEchart1 = 0;

	seriesData.map(e=>{
		allEchart1 = allEchart1 + e.value
		echart1.push({...e,'value':e.value})
	})
	const colorList = ['#6851f1', '#78d8ff', '#8213E3'];
	const areaChart = {
		tooltip: {
			show:true,
			trigger: 'item',
			formatter:function(parames){
				let value = (parames.value/allEchart1).toFixed(4)
				value = (value*100)
				if(JSON.stringify(value).length > 5){
					value = value.toFixed(2)
				}
                let html = '<div class="tooltip-modal">'
                html += `${parames.name}：${parames.value}  (${value}%)`
                html += '</div>'
                return html
			}
		},
		series: [
			// 主要展示层的
			{
				radius: ['0%', '81%'],
				center: ['50%', '50%'],
				type: 'pie',
				itemStyle: {
					normal: {
						color: function(params) {
							return colorList[params.dataIndex]
						}
					}
				},
				label:{
					normal:{
						color: '#fff', //'rgba(255, 255,255, 0.6)'//,
						fontSize: vw2px(1),
                        position: 'inside',
                        formatter: function (parames) {
                            let value = (parames.value / allEchart1).toFixed(4)
                            value = (value * 100)
                            if (JSON.stringify(value).length > 5) {
                                value = value.toFixed(2)
                            }
                            return `${parames.name}`
                        }
					}
				},
				data: seriesData
			},
			// 边框的设置
			{
				radius: ['76%', '81%'],
				center: ['50%', '50%'],
				type: 'pie',
				animation: false,
				itemStyle: {
					normal: {
						color:'rgba(70,79,97,0.5)'
					}
				},
                tooltip: {
                    show: false
                },
				data: [{value:1}]
			}
		]
	}

	const pieChart = {
		color: ['#0d89f6', '#8214e3', '#3473b2'],
		grid: {
			left: 5, top: 5, bottom: 25, right: 5
		},
		tooltip: {
			trigger: 'item',
			// formatter: "{a} {b} : {c} ({d}%)"
			// formatter: "{a} {b} : {c}"
			formatter: function (param) {
                let html = '<div class="tooltip-modal">'
                html += `${param.name}：${param.value} `
                html += '</div>'
                return html
            }
		},
		series: [{
			name: '',
			data: seriesData,
			type: 'pie',
			radius,
			label: {
				position: 'inside',
				formatter: "{d}%",
				fontSize: vw2px(1)
			},
			center: ['50%', '50%'],
			showBackground: true,
			backgroundStyle: {
				color: 'rgba(220, 220, 220, 0.8)'
			}
		}]
	}
    const pieChart1 = {
        color: ['#9E4EE5', '#50E3C2', '#2457D9'],
        backgroundColor: 'transparent',
        grid: {
            bottom: 100,
            left: 100,
            right: '10%'
        },
        tooltip: {
            show: false,
            trigger: 'item',
            // formatter:function(parames){
            // 	// return
            // }
        },
        series: [
            // 主要展示层的
			{
				radius: ['50%', '90%'],
				center: ['50%', '50%'],
				type: 'pie',
				label: {
					position: 'inner',
					formatter:function(parames){
						let value = (parames.value/allEchart1).toFixed(4)

							value = (value*100)
							if(JSON.stringify(value).length > 5){
								value = value.toFixed(2)
							}
						return `${parames.name} \n ${value}%`
					},
					color: '#fff',
					fontSize: vw2px(1)
				},
				labelLine: {
					normal: {
						show: true,
						length: 30,
						length2: 55
					},
					emphasis: {
						show: true
					}
				},
				data: echart1,

			},
			// 边框的设置
			{
				radius: ['45%', '50%'],
				center: ['50%', '50%'],
				type: 'pie',
				label: {
					normal: {
						show: false
					},
					emphasis: {
						show: false
					}
				},
				labelLine: {
					normal: {
						show: false
					},
					emphasis: {
						show: false
					}
				},
				animation: false,
				tooltip: {
					show: false
				},
				data: [{
					value: 1,
					itemStyle: {
						color: "rgba(70,79,97,0.5)",
					},
				}],
			}, {
				name: '外边框',
				type: 'pie',
				clockWise: false, //顺时加载
				hoverAnimation: false, //鼠标移入变大
				center: ['50%', '50%'],
				radius: ['50%', '50%'],
				label: {
					normal: {
						show: false
					}
				},
				data: [{
					value: 9,
					name: '',
					itemStyle: {
						normal: {
							borderWidth: 2,
							borderColor: '#0b5263'
						}
					}
				}]
			},
		]
	}
	let fun;
	switch(types){
		case 0:
			fun = areaChart
			break;
		case 1:
			fun = pieChart
			break;
		case 2:
			fun = pieChart1
			break;
	}
	return fun;
}

// 封装横向柱状图
function acrossChart(option){
    const data = option || {};
    option.xAxisData = option.xAxisData.map(item => {
        return item
    })
    const chart1 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function (param) {
                return formatter(param)
            }
        },
        grid: {
            containLabel: true,
            left: '2%', top: '2%', bottom: '2%', right: '18%'
        },
        xAxis: {
            position: 'top',
            type: 'value',
            // boundaryGap: [0, 0.01],
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: "rgba(70,79,97,0.5)"  // 修改网格线颜色
                },
            },
            axisLabel: {
                show: false
            }
        },
        yAxis: {
            type: 'category',
            data: data.xAxisData,
            axisLine: {
                lineStyle: {
                    color: '#02eeff'
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#02eeff',
                    fontSize: vw2px(0.9)
                }
            }
        },
        color: ['#02eeff'],
        series: [
            {
                type: 'bar',
                data: data.seriesData,
                barWidth: vw2px(1),
                itemStyle: {
                    normal: {
                        /*color: function (params) {
                            var color = ['#6851f1', '#78d8ff', '#8213E3'];
                            return color[params.dataIndex]
                        },*/
                        barBorderRadius: [0, 30, 30, 0],
                        //   shadowColor: 'rgba(0,160,221,1)',
                        shadowBlur: 4,
                    }
                },
                label: {
                    show: true,
                    position: 'right',
                    color: '#02eeff',
                    fontSize: vw2px(1),
                    fontWeight: 'bold'
                }
            }
        ]
    }
    return chart1;
}

function map({data, name, scatterData} = {}) {
    // const data = option
    let array = data.map(e => {
        return e.value
    })
    let maxNum = Math.max(...array)
    return {
        title: {
            text: '',
            left: 'center'
        },
        tooltip: {
            show: false,       //是否显示提示框组件，包括提示框浮层和 axisPointer。 [ default: true ]
            // trigger: 'item',  //触发类型。 [ default: 'item' ]
            // showDelay: 0,
            // transitionDuration: 0.2,
            formatter: function (params) {
                return `<div class="windowAlert">
                    <img src="${alertBg}" />
                    <h2>${params.name}</h2>
                    </div>`
            },
            backgroundColor: "none",//提示标签背景颜色
            textStyle: {color: 'none'} //提示标签字体颜色

        },
        visualMap: {
            show: false,
            min: 0,
            max: maxNum,
            text: ['High', 'Low'],
            realtime: false,
            calculable: false,
            inRange: {
                color: ['#FDE2B6', '#FF7252']
            }
        },
        geo: {
            map: name,   //和上面registerMap中的一直
            show: false
        },
        series: [
            {
                name: '中国',   //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。见上：可以在tooltip中获取到
                type: 'map',    //指定是地图类型
                map: name,   //和上面registerMap中的一直
                mapType: 'china',
                zoom: 1.3,
                itemStyle: {
                    borderColor: '#ffffff'
                },
                roam: false, //是否开启平游或缩放
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#333',
                            fontSize: vw2px(0.8),
                            textShadowColor: '#ccc',
                            textShadowBlur: 1,
                            textShadowOffsetX: 1
                        }
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            // color: '#ccc'
                        }
                    }
                },
                silent: true,
                // 鼠标移入对应省份区域显示对应的值：可以异步获取
                data: data
            },
            {
                name: '坐标',
                type: 'scatter',
                coordinateSystem: 'geo',
                // symbol: 'image://',
                symbol: 'image://',
                symbolSize: 32,
                itemStyle: {
                    color: '#fff',
                    borderWidth: 2,
                    // borderColor: this.colorList[item.name],
                    opacity: 1
                },
                label: {
                    show: false
                },
                tooltip: {
                    show: true,
                    formatter: function (params) {
                        const data = params.data
                        return `<div class="windowAlert">
                                        <img class="bg-img" src="${alertBg}" />
                                        <h2>${data.name}</h2>
                                        <img class="header-img" src="${data.img}" object-fit="cover" />
                                        <div class="content">
                                            <span>生产企业数量：${data.enterpriseNum}家</span>
                                            <span>注册产品数量：${data.productNum}件</span>
                                        </div>
                                    </div>`
                    },
                    padding: 0
                },
                data: scatterData,
                zlevel: 20
            }
        ]
    }
}
//折线图
function cross(option){
	const data = option
	const chart = {
		//参考配置文档：https://echarts.baidu.com/option.html#title
		title: {
			text: '',
			left: 'center'
		},
		color: ['#0D89F6','#50E3C2'],
		//参考配置文档：https://echarts.baidu.com/option.html#tooltip
		tooltip: {
			trigger: 'axis',
            formatter: function(param) {
                if (param.length > 0) {
                    let html = '<div class="tooltip-modal">'
                    html += `<p>${param[0].name}</p>`
                    param.forEach(item => {
                        html += `<div>`
                        html += `<span style="margin-right:5px;display:inline-block;width: 0.8vw;height: 0.8vw;border-radius: 50%;background-color: ${item.color};"></span>`
                        html += `${item.seriesName}：${item.value}`
                        html += `</div>`
                    })
                    html += '</div>'
                    return html
                } else {
                    return ''
                }
            }
		},
		legend: {
			icon:'rect',
            itemWidth: parseInt(vw2px(0.8)),
            itemHeight: parseInt(vw2px(0.8)),
			data: data.seriesData,
			textStyle:{
				color: ['#0D89F6','#50E3C2'],
                fontSize: vw2px(1)
			},
			show:true
		},
		grid: {
            top: '18%',
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [
			{
				type: 'category',
				boundaryGap: false,
				data: data.xAxisData,
				axisLine: {
					lineStyle: {
						color: '#50EEFF'
					}
				},
				axisLabel: {
					margin: 10,
					color: '#50EEFF',
					textStyle: {
						fontSize: vw2px(0.9)
					},
				},
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: ['#464F61']
                    }
                }
			}
		],
		yAxis: [
			{
				type: 'value',
				axisLine: {
					lineStyle: {
						color: '#50EEFF'
					}
				},
				axisLabel: {
					margin: 10,
					color: '#50EEFF',
					textStyle: {
						fontSize: vw2px(0.9)
					},
				},
                splitLine: {
                    show: false
                }
			}
		],
		series: data.seriesData.map(item => {
            return {
                ...item,
                label: {
                    show: true,
                    position: 'top',
                    fontSize: vw2px(1.1)
                }
            }
        })

	};
	return chart
}

function barChart2(option) {
    let data = [];
    option.seriesData.map(e => {
        data.push(e.value)
    })
    const chart = {
		backgroundColor:'transparent',
		tooltip: {
            trigger: 'axis',
            formatter: function (param) {
                if (Object.prototype.toString.call(param) === '[object Array]' && param.length > 0) {
                    const { name, value } = param[0]
                    let html = '<div class="tooltip-modal">'
                    html += name + '：' + value
                    html += '</div>'
                    return html
                } else {
                    return ''
                }
            },
			axisPointer: { // 坐标轴指示器，坐标轴触发有效
				type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
			}
		},
		xAxis: {
			data: option.xAxisData,
			//坐标轴
			axisLine: {
				lineStyle: {
					color: '#3eb2e8'
				}
			},
			//坐标值标注
			axisLabel: {
				show: true,
                interval: 0,
				textStyle: {
					color: '#02eeff',
                    fontSize: vw2px(0.9)
				}
			}
		},
		grid: {
			top: '20%',
			right: '5%',
			left: '10%',
			bottom: '18%'
		},
		yAxis: {
			//坐标轴
			axisLine: {
				show: false
			},
			//坐标值标注
			axisLabel: {
				show: false,
				textStyle: {
					color: '#78dffd',
				}
			},
			//分格线
			splitLine: {
				lineStyle: {
					color: 'rgba(70,79,97,0.5)'
				}
			}
		},
		series: [
            {
                type: 'pictorialBar',
                symbolSize: [vw2px(2), vw2px(0.8)],
                symbolOffset: [0, vw2px(-0.3)],
                symbolPosition: 'end',
                z: 12,
                label: {
                    normal: {
                        show: true,
                        position: "top",
                        fontSize: vw2px(1),
                        fontWeight: 'bold',
                        color: '#34DCFF'
                    }
                },
                color: "#2DB1EF",
                data: data
            },
            {
                type: 'pictorialBar',
                symbolSize: [vw2px(2), vw2px(0.8)],
                symbolOffset: [0, vw2px(0.4)],
                z: 12,
                color: "#2DB1EF",
                data: data
            },
            {
                type: 'bar',
                barWidth: vw2px(2),
                barGap: '10%', // Make series be overlap
                barCateGoryGap: '10%',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: "#38B2E6"
                            },
                            {
                                offset: 1,
                                color: "#1490ca"
                            }
                        ]),
                        opacity: .9
                    },
                },
                data: data
            }
        ]
    }
	return chart
}
//pie有无效图
function pietf(option){
	const num = option.x[0]+option.x[1];
	let x = (option.x[0]/num).toFixed(2)
	let y = (option.x[1]/num).toFixed(2)
	x = Math.round(x*100)
	y = Math.round(y*100)
	var placeHolderStyle = {
		normal: {
			label: {
				show: false
			},
			labelLine: {
				show: false
			},
			color: "rgba(0,0,0,0)",
			borderWidth: 2
		},
		emphasis: {
			color: "rgba(0,0,0,0)",
			borderWidth: 2
		}
	};
	var dataStyle = {
		normal: {
			formatter: '{c}%',
			position: 'center',
			show: true,
			textStyle: {
                color: '#50EEFF',
				fontSize: vw2px(1.8),
				fontWeight: 'bold'
			}
		}
	};
	const chart ={
		backgroundColor: 'transparent',
		title: [{
			text: option.y[0],
			left: '29%',
			top: '60%',
			textAlign: 'center',
			textStyle: {
                color: '#50EEFF',
                fontSize: vw2px(1),
                fontWeight: 'normal',
                textAlign: 'center'
			}
		}, {
			text: option.y[1],
			left: '69%',
			top: '60%',
			textAlign: 'center',
			textStyle: {
				color: '#50EEFF',
                fontSize: vw2px(1),
				fontWeight: 'normal',
				textAlign: 'center'
			},
		}],

		//第一个图表
		series: [
            {
				type: 'pie',
				hoverAnimation: false, //鼠标经过的特效
                radius: ['40%', '50%'],
				center: ['30%', '50%'],
				startAngle: 225,
				labelLine: {
					normal: {
						show: false
					}
				},
				label: {
					normal: {
						position: 'center'
					}
				},
				data: [
                    {
                        value: 100,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,0,0,0.5)"
                            }
                        },
                    }, {
                        value: 35,
                        itemStyle: placeHolderStyle,
                    }
				]
			},
			//上层环形配置
			{
				type: 'pie',
				hoverAnimation: true, //鼠标经过的特效
                radius: ['40%', '50%'],
				center: ['30%', '50%'],
				startAngle: 225,
				labelLine: {
					normal: {
						show: false
					}
				},
				label: {
					normal: {
						position: 'center'
					}
				},
                data: [
                    {
						value: x,
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    {
                                        offset: 0,
                                        color: '#2DFFD0',
                                    },
                                    {
                                        offset: 1,
                                        color: '#A6FFED',
                                    }
                                ])
							}
						},
						label: dataStyle,
					},
                    {
						value: 36,
						itemStyle: placeHolderStyle,
					},
				]
			},

			//第二个图表
			{
				type: 'pie',
				hoverAnimation: false,
                radius: ['40%', '50%'],
				center: ['70%', '50%'],
				startAngle: 225,
				labelLine: {
					normal: {
						show: false
					}
				},
				label: {
					normal: {
						position: 'center'
					}
				},
                data: [
                    {
                        value: 100,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,0,0,0.5)"
                            }
                        }
                    },
                    {
                        value: 35,
                        itemStyle: placeHolderStyle,
                    }
                ]
			},

			//上层环形配置
			{
				type: 'pie',
				hoverAnimation: true,
				radius: ['40%', '50%'],
				center: ['70%', '50%'],
				startAngle: 225,
				labelLine: {
					normal: {
						show: false
					}
				},
				label: {
					normal: {
						position: 'center'
					}
                },
                data: [
                    {
						value: y,
						itemStyle: {
							normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    {
                                        offset: 0,
                                        color: '#3289F5',
                                    },
                                    {
                                        offset: 1,
                                        color: '#51EFFD',
                                    }
                                ])
							}
						},
						label: dataStyle,
					}, {
						value: 36,
						itemStyle: placeHolderStyle,
					},

				]
			},
		]
	}
	return chart
}

function areaBar(option){
    // const xAxisData = option.xAxisData.map(item => {
    //     return item + '类'
    // })
	var charts = { // 按顺序排列从大到小
		cityList: option.xAxisData,
		cityData: option.seriesData
	}
	var top10CityList = charts.cityList
	var top10CityData = charts.cityData

	var color = ['rgba(13,137,246', 'rgba(80,226,193', 'rgba(158,78,229',]

	let lineY = []
    // console.log(charts);
    for (var i = 0; i < charts.cityList.length; i++) {
        var x = i
        if (x > color.length - 1) {
            x = color.length - 1
        }
        var data = {
            name: charts.cityList[i] + '类',
            color: color[x] + ')',
            value: charts.cityData[i],
            itemStyle: {
                normal: {
                    show: true,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: color[x] + ', 0)'
                    }, {
                        offset: 1,
                        color: color[x] + ', 1)'
                    }], false),
                    barBorderRadius: [0, 50, 50, 0]
                },
                emphasis: {
                    shadowBlur: 15,
                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                }
            }
        }
		lineY.push(data)
	}
    const chart = {
        backgroundColor: 'transparent',
        title: {
            show: false
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function (param) {
                return formatter(param)
            }
        },
        grid: {
            borderWidth: 0,
            top: '10%',
            left: '5%',
            right: '25%',
            bottom: '3%'
        },
        color: color,
        yAxis: [{
            type: 'category',
            inverse: true,
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: true,
                inside: false
            },
            data: top10CityList
        }],
        xAxis: {
            type: 'value',
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            }
        },
        series: [{
            name: '',
            type: 'bar',
            zlevel: 2,
            barWidth: vw2px(1.3),
            data: lineY,
            animationDuration: 1500,
            label: {
                normal: {
                    color: '#b3ccf8',
                    show: true,
                    position: [0, -vw2px(1.2)],
                    textStyle: {
                        fontSize: vw2px(1)
                    },
                    formatter: function (a, b) {
                        return a.name
                    }
                }
            }
        }],
        animationEasing: 'cubicOut'
    }
	return chart
}

export{
    nowTime,
	barChart,
	barChart2,
    pieChart,
	acrossChart,
	map,
	getUUID,
	cross,
	pietf,
	areaBar,
    vw2px
}
